<!-- 左侧导航栏 -->
<template>
  <div class="leftscroll">
    <ul v-if="this.step>=1">
      <!-- <li :class="step==0?'active':''" @click="backTop(0,0)">首页</li> -->
      <li :class="step==1?'active':''" @click="backTop(398,1)">
        <div>热门品牌</div>
      </li>
      <li :class="step==2?'active':''" @click="backTop(783,2)">
        <div>爆款特惠</div>
      </li>
      <li :class="step==3?'active':''" @click="backTop(1228,3)">
        <div>热卖推荐</div>
      </li>
      <li :class="step==4?'active':''" @click="backTop(1703,4)">
        <div>机械类</div>
      </li>
      <li :class="step==5?'active':''" @click="backTop(2255,5)">
        <div>气动类</div>
      </li>
      <li :class="step==6?'active':''" @click="backTop(2807,6)">
        <div>电气类</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      step: 0
    };
  },
  methods: {
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      if (scrollTop >= 0 && scrollTop < 398) {
        this.step = 0;
      }
      if (scrollTop >= 398 && scrollTop < 783) {
        this.step = 1;
      }
      if (scrollTop >= 783 && scrollTop < 1228) {
        this.step = 2;
      }
      if (scrollTop >= 1228 && scrollTop < 1703) {
        this.step = 3;
      }
      if (scrollTop >= 1703 && scrollTop < 2255) {
        this.step = 4;
      }
      if (scrollTop >= 2255 && scrollTop < 2807) {
        this.step = 5;
      }
      if (scrollTop >= 2807) {
        this.step = 6;
      }
    },
    backTop(scrolly, z, event) {
      document.documentElement.scrollTop = scrolly;
      this.step = z;
      console.log(event);
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll); // 离开页面 关闭监听 不然会报错
  }
};
</script>
<style lang='scss' scoped>
.leftscroll {
  position: fixed;
  left: 50%;
  top: 29%;
  z-index: 999;
  margin-left: -638px;
  ul {
    width: 34px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    li {
      border-bottom: 1px solid #ccc;
      color: #333;
      font-size: 12px;
      text-align: center;
      line-height: 18px;
      transition: all 0.3s;

      div {
        width: 34px;
        height: 34px;
        cursor: pointer;
        &:hover {
          background-color: #409eff;
          color: #fff;
          transition: ease-in 0.2s;
        }
      }
    }
  }
  .active {
    background-color: #409eff;
    color: #fff;
  }
}
</style>